<template>
    <!-- components/qrcode/index.wxml -->
    <view class="qrcode">
        <image :src="qrcodeURL" @longpress="save" :style="'width:' + width + 'rpx; height:' + width + 'rpx;margin:0 auto;display: block;'"></image>
        <slot name="text"></slot>
    </view>
</template>

<script>
// components/qrcode/index.js
const QR = require('@/utils/QRCode');
const rpx2px = uni.getSystemInfoSync().windowWidth / 750;
export default {
    data() {
        return {
            qrcodeURL: ''
        };
    },
    options: {
        multipleSlots: true // 在组件定义时的选项中启用多slot支持
    },
    props: {
        value: String,
        //二维码内容
        width: String //二维码宽度（默认长宽相等）
    },
    mounted() {
        // 处理小程序 ready 生命周期
        this.$nextTick(() => this.ready());
    },
    methods: {
        ready: function () {
            var imgData = QR.createQrCodeImg(this.value, {
                typeNumber: 1,

                //码点大小 1-40，数字越大，码点越小，二维码会显得越密集
                errorCorrectLevel: 'H',

                //纠错等级 H等级最高(30%) 简单来说，就是二维码被覆盖了多少仍然能被识别出来 详见qrcode.js
                size: parseInt(rpx2px * this.width)
            });
            this.setData({
                qrcodeURL: imgData
            });
        },

        /**
         * 长按保存图片
         */
        save: function () {
            var that = this;
            var aa = uni.getFileSystemManager();
            var filePath = uni.env.USER_DATA_PATH + '/qrcode_' + that.value + '.png'; //写入临时文件
            aa.writeFile({
                filePath: filePath,
                data: that.qrcodeURL.slice(22),
                encoding: 'base64',
                success: (res) => {
                    //保存临时文件到手机相册中去
                    uni.saveImageToPhotosAlbum({
                        filePath: filePath,
                        success: function (res) {
                            uni.showToast({
                                title: '保存成功'
                            });
                        },
                        fail: function (err) {
                            console.log(err);
                        }
                    });
                    console.log(res);
                },
                fail: (err) => {
                    console.log(err);
                }
            });
        }
    },
    created: function () {}
};
</script>
<style>
@import './index.css';
</style>
